import Rectangle from "./Rectangle/index.js"

const editorJs = document.querySelector('#editor-js')
editorJs.value = `
  import Rectangle from "./Rectangle.js"
  const previewBox = document.querySelector('#rectangle-container');
  // 图片操作
  const insertImage = document.querySelector('#insert-image'); // 插入图片
  const uploadImage = document.querySelector('#upload-image'); // 上传图片
  // 截图操作
  const radioList = document.getElementsByName('color-choose'); // 设置默认选中颜色
  radioList[0].checked = "checked";
  const startClip = document.querySelector('#startClip'); // 开始截图
  const getClip = document.querySelector('#getClip'); // 获取截图
  const closeClip = document.querySelector('#closeClip'); // 关闭截图
  const getCurrentColor = () => {
    for (let i = 0; i < radioList.length; i++) {
      if (radioList[i].checked) {
        return radioList[i].value
      }
    }
  }

  const rect = new Rectangle('#rectangle-container', {
    rect: {
      border: {
        width: 1
      }
    },
    dot: {
      width: 4
    },
    events: {
      contextmenu: {
        disabled: true
      },
      draggable: {
        disabled: false
      },
      clip: {
        disabled: false
      }
    }
  })
  /** 开始绘制 */
  startClip.onclick = e => {
    rect.set('rect.border.color', getCurrentColor())
    rect.startClip()
  }

  rect.on('draging', e => {
    console.log('draging', e);
  })

  rect.on('dragend', e => {
    console.log('dragend', e);
  })
  /** 插入图片 */
  insertImage.onclick = () => {
    rect.insertImage('../style/img/insert.png')
  }
  uploadImage.onclick = () => {
    rect.uploadFile();
  }
  /** 获取截图 */
  getClip.onclick = () => {
    console.log(rect.rect);
    rect.getClip();
  }
  /** 关闭截图 */
  closeClip.onclick = () => {
    rect.closeClip();
  }

`

const previewBox = document.querySelector('#rectangle-container');
// 图片操作
const insertImage = document.querySelector('#insert-image'); // 插入图片
const uploadImage = document.querySelector('#upload-image'); // 上传图片
// 截图操作
const radioList = document.getElementsByName('color-choose'); // 设置默认选中颜色
radioList[0].checked = "checked";
const startClip = document.querySelector('#startClip'); // 开始截图
const getClip = document.querySelector('#getClip'); // 获取截图
const closeClip = document.querySelector('#closeClip'); // 关闭截图
const getCurrentColor = () => {
  for (let i = 0; i < radioList.length; i++) {
    if (radioList[i].checked) {
      return radioList[i].value
    }
  }
}

const rect = new Rectangle('#rectangle-container', {
  rect: {
    border: {
      width: 1
    }
  },
  dot: {
    width: 4
  },
  events: {
    contextmenu: {
      disabled: true
    },
    draggable: {
      disabled: false
    },
    clip: {
      disabled: false
    }
  }
})
/** 开始绘制 */
startClip.onclick = e => {
  rect.set('rect.border.color', getCurrentColor())
  rect.startClip()
}

rect.on('draging', e => {
  console.log('draging', e);
})

rect.on('dragend', e => {
  console.log('dragend', e);
})
/** 插入图片 */
insertImage.onclick = () => {
  rect.insertImage('/style/img/insert.png')
}
uploadImage.onclick = () => {
  rect.uploadFile();
}
/** 获取截图 */
getClip.onclick = () => {
  console.log(rect.rect);
  rect.getClip();
}
/** 关闭截图 */
closeClip.onclick = () => {
  rect.closeClip();
}
